<template>
  <div class="notice-table">
    <!-- 表格头部 -->
    <div class="title-button">
      <div class="title">公告管理</div>
      <div class="button">
        <el-button v-if="usePermission('notice.add')" :icon="Plus" color="#6C52EA" @click.stop="handleAddClick">新增</el-button>
      </div>
    </div>
    <!-- 表格主体 -->
    <div class="table-content">
      <el-table
        v-loading="loading"
        ref="multipleTableRef"
        :data="dataLists"
        :header-cell-style="{
          background: 'rgb(250, 250, 250)',
          fontSize: '14px',
          fontWeight: '700',
          letterSpacing: '0px',
          lineHeight: '0px',
          color: 'rgba(55, 59, 69, 1)',
          textAlign: 'center'
        }"
        :cell-style="{
          fontSize: '14px',
          fontWeight: '400',
          letterSpacing: '0px',
          lineHeight: '0px',
          color: 'rgba(49, 53, 64, 1)',
          textAlign: 'center'
        }"
        style="width: 100%"
        row-key="id"
        class="table"
        @selection-change="handleSelectionChange"
      >
        <p>{{ dataLists }}</p>
        <el-table-column type="selection" width="55" />
        <el-table-column property="data_title" label="公告标题" />
        <el-table-column label="公告类型">
          <template #default="{ row }">
            <el-tag class="tag-color" :class="row.type === '公告' ? 'green' : 'yellow'">{{
              row.type
            }}</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column label="公告发布人" property="user_name" /> -->
        <!-- <el-table-column property="is_read" label="状态">
          <template #default="{ row }">
            <span>已读:{{ row.recipient_connect.length - getUnreadPeople(row) }}</span
            >/
            <span>未读:{{ getUnreadPeople(row) }}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="创建时间" property="created_at" />
        <el-table-column fixed="right" label="操作" width="150px">
          <template #default="{ row }">
            <el-popconfirm title="确定要删除这个通知公告吗？" @confirm="removeRow(row.id)">
              <template #reference><el-button :disabled="!usePermission('notice.delete')" link type="danger">删除</el-button></template>
            </el-popconfirm>
            <el-button :disabled="!usePermission('menu.updata')" link @click="onEdit(row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 页脚 -->
    <ElConfigProvider :locale="zhCn">
      <div class="content-footer">
        <el-pagination
          v-model:currentPage="params.pageNum"
          v-model:page-size="params.pageSize"
          :page-sizes="[10]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="+total"
          @size-change="onSize"
          @current-change="onPage"
        />
      </div>
    </ElConfigProvider>
  </div>
</template>
<script lang="ts" setup>
import { ref, defineExpose, computed, reactive } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import useCurrentInstance from '@/utils/useCurrentInstance'
import { usePermission } from '@/hooks/usePermission'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import { ElMessage, ElTable } from 'element-plus'
import { useRouter } from 'vue-router'
import { getNoticeList, deleteNoticeData } from '@/apis/system/notice'
import { Itype } from '@/type'
// import { storeToRefs } from 'pinia'
// import { store } from '@/store/issues'
const emit = defineEmits(['drawerSave', 'dialogSave'])
/**
 * @desc:获取公告数据
 *
 */
let search: Itype = ref()
const loading = ref(false)
let total: Itype = ref(0)
let pager = ref({
  page: 1,
  size: 10,
  total: 0
})
let params = reactive({
  data_title: '',
  pageNum: 1,
  pageSize: 10
})
let dataLists: Itype = ref()
let data_title: Itype = ref()
const getData = (data?: string) => {
  loading.value = true
  if (data) {
    params.data_title = data
    params.pageNum = 1
  }
  getNoticeList(params)
    .then((res) => {
      if (res.rows) {
        dataLists.value = res.rows
        total.value = res.total
        dataLists.value.forEach((element: Itype) => {
          element.created_at = new Date(
            +new Date(new Date(element.created_at).toJSON()) + 8 * 3600 * 1000
          )
            .toISOString()
            .replace(/T/g, ' ')
            .replace(/\.[\d]{3}Z/, '')
        })
        loading.value = false
      }
    })
    .catch(() => {
      ElMessage('服务器内部错误')
    })
}
getData()
interface Notice {
  data_title: string
  data_content: string
  id: number
  is_show: number
  type: string
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<Notice[]>([])
const handleSelectionChange = (val: Notice[]) => {
  multipleSelection.value = val
}
/**
 * @desc:新增公告
 */
const router = useRouter()
const handleAddClick = () => {
  router.push({
    path: '/notice/add-notice'
  })
}
/**
 * @desc:删除
 */
const removeRow = (id: number) => {
  let dataId = id
  deleteNoticeData(dataId)
    .then((res) => {
      if (res) {
        getData()
      }
    })
    .catch(() => {
      ElMessage('服务器内部错误')
    })
}
/**
 * @desc:打开编辑弹窗
 */
let activeList: Itype = ref()
const onEdit = (row: []) => {
  activeList.value = row
  const data: string = JSON.stringify(activeList.value)
  router.push({
    path: '/notice/add-notice',
    query: { id: activeList.value.id }
  })
}
/**
 * @desc: 分页数量
 * @param {Number} size
 */
const onSize = (size: number) => {
  params.pageSize = size
  params.pageNum = 1
  getData()
}
/**
 * @desc: 切换页码
 * @param {Number} page
 */
const onPage = (page: number) => {
  params.pageNum = page
  getData()
}
/**
 * @desc:筛选
 */
const onSearch = (data: string) => {
  getData(data)
}
/**
 *
 * @desc:获取登录用户信息
 */
// const { proxy } = useCurrentInstance()
// let userInfo: Itype = ref({})
// const getUserInfo = () => {
//   userInfo.value = proxy.$GetUserInfo()
// }
// getUserInfo()
/**
 * @desc: 未读人数
 */
const getUnreadPeople = computed(() => (item: Itype) => {
  let num = 0
  num = item.recipient_connect.filter((item: Itype) => item.is_read === 0).length
  return num
})
/**
 * @desc:重置
 */
const onRefresh = () => {
  params.data_title = ''
  getData(params.data_title)
}
defineExpose({
  onSearch,
  onRefresh
})
</script>

<style lang="less" scoped>
:deep(.el-input--small .el-input__wrapper) {
  background: rgba(247, 247, 247, 1);
  color: rgba(247, 247, 247, 1);
}
:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #6c52ea inset;
  background: #fff;
}
:deep(.el-pager li) {
  width: 10px;
  margin: 0 4px;
  box-sizing: border-box;
  background: rgba(247, 247, 247, 1);
  color: #6c52ea;
  color: var(--el-pagination-hover-color);
  cursor: default;
}
:deep(.el-pager li.is-active) {
  width: 10px;
  margin: 0 4px;
  box-sizing: border-box;
  color: #fff;
  color: #fff;
  background: #6c52ea;
  opacity: 0.6;
  cursor: default;
}
:deep(.el-pagination__sizes + button.btn-prev[type='button']) {
  width: 10px;
  margin: 0 4px;
  box-sizing: border-box;
  background: rgba(247, 247, 247, 1);
  color: #fff;
  color: var(--el-pagination-hover-color);
  cursor: default;
}
:deep(.el-pagination__sizes + button.btn-prev[type='button'].is-active) {
  width: 10px;
  margin: 0 4px;
  box-sizing: border-box;
  background: rgba(247, 247, 247, 1);
  color: #fff;
  color: var(--el-pagination-hover-color);
  cursor: default;
}
:deep(.el-pager + button.btn-next[type='button']) {
  width: 10px;
  margin: 0 4px;
  box-sizing: border-box;
  background: rgba(247, 247, 247, 1);
  color: #fff;
  color: var(--el-pagination-hover-color);
  cursor: default;
}
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  border-color: #6c52ea;
  background-color: #6c52ea;
}
:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
  border-color: #6c52ea;
  background-color: #6c52ea;
}
:deep(.el-checkbox__inner:hover) {
  border-color: #6c52ea;
}
:deep(.el-table) {
  thead {
    height: 48px;
  }
  .cell {
    overflow: hidden;
    padding: 0 3px;
    box-sizing: border-box;
    text-overflow: ellipsis;
    word-break: break-all;
    line-height: 23px;
    white-space: nowrap;
    white-space: normal;
  }
  .icon-color {
    color: #6c52ea;
  }
}
.notice-table {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  width: 100%;
  margin-top: 8px;
  padding: 8px 18px 8px 10px;
  box-sizing: border-box;
  background-color: #fff;
  .title-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    box-sizing: border-box;
    .title {
      color: rgba(0, 0, 0, 0.65);
      font-size: 18px;
      font-weight: 700;
      transition: all 0.3s;
    }
    .button {
      .el-button {
        height: 28px;
        font-size: 13px;
      }
    }
  }
  :deep(.el-table .el-table__cell) {
    min-width: 0;
    padding: 10px 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: left;
    z-index: 1;
    .el-tag.el-tag--warning {
      background-color: #fdf6ec;
      border-color: #faecd8;
      color: #e6a23c;
    }
  }

  .yellow {
    background-color: #ff779a;
    border-color: #ff779a;
    color: #fff;
    opacity: 0.8;
  }
  .green {
    background-color: #c18dff;
    border-color: #c18dff;
    color: #fff;
    opacity: 0.8;
  }

  .table-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    height: 0;
    flex-grow: 1;
    flex-shrink: 0;
  }
}
</style>